<template>
	<view class="dispatcher-dashboard">
		<!-- 统计卡片 -->
		<view class="stats-section">
			<view class="stat-card">
				<view class="stat-icon pending">⏳</view>
				<view class="stat-info">
					<text class="stat-number">{{ stats.pendingOrders || 0 }}</text>
					<text class="stat-label">待指派订单</text>
				</view>
			</view>
			
			<view class="stat-card">
				<view class="stat-icon processing">🔄</view>
				<view class="stat-info">
					<text class="stat-number">{{ stats.processingOrders || 0 }}</text>
					<text class="stat-label">进行中订单</text>
				</view>
			</view>
			
			<view class="stat-card">
				<view class="stat-icon techs">👨‍💻</view>
				<view class="stat-info">
					<text class="stat-number">{{ stats.availableTechs || 0 }}</text>
					<text class="stat-label">可用技术员</text>
				</view>
			</view>
			
			<view class="stat-card">
				<view class="stat-icon assigned">✅</view>
				<view class="stat-info">
					<text class="stat-number">{{ stats.assignedToday || 0 }}</text>
					<text class="stat-label">今日指派</text>
				</view>
			</view>
		</view>
		
		<!-- 快捷操作 -->
		<view class="quick-actions">
			<view class="section-title">快捷操作</view>
			<view class="action-grid">
				<view class="action-item" @click="goPendingOrders">
					<view class="action-icon pending-icon">📋</view>
					<text class="action-text">待指派订单</text>
				</view>
				
				<view class="action-item" @click="goTechList">
					<view class="action-icon tech-icon">👥</view>
					<text class="action-text">技术员列表</text>
				</view>
				
				<view class="action-item" @click="goOrderList">
					<view class="action-icon order-icon">📊</view>
					<text class="action-text">所有订单</text>
				</view>
				
				<view class="action-item" @click="goAssignHistory">
					<view class="action-icon history-icon">📈</view>
					<text class="action-text">指派记录</text>
				</view>
			</view>
		</view>
		
		<!-- 待指派订单 -->
		<view class="pending-orders">
			<view class="section-title">
				<text>待指派订单</text>
				<text class="more" @click="goPendingOrders">查看全部</text>
			</view>
			<view class="order-list">
				<view class="order-item" v-for="order in pendingOrders" :key="order.id" @click="goOrderDetail(order.id)">
					<view class="order-header">
						<text class="order-title">{{ order.title }}</text>
						<text class="order-budget">￥{{ order.budget }}</text>
					</view>
					<view class="order-info">
						<text class="category">{{ order.categoryName }}</text>
						<text class="user">{{ order.userName }}</text>
						<text class="time">{{ formatTime(order.createTime) }}</text>
					</view>
					<view class="order-actions">
						<button class="assign-btn" @click.stop="assignOrder(order.id)">
							立即指派
						</button>
					</view>
				</view>
				
				<view class="empty" v-if="pendingOrders.length === 0">
					<text>暂无待指派订单</text>
				</view>
			</view>
		</view>
		
		<!-- 技术员状态 -->
		<view class="tech-status">
			<view class="section-title">技术员状态</view>
			<view class="tech-list">
				<view class="tech-item" v-for="tech in techList" :key="tech.id">
					<view class="tech-info">
						<view class="avatar">
							<text class="avatar-text">{{ tech.realName ? tech.realName.charAt(0) : 'T' }}</text>
						</view>
						<view class="info">
							<text class="name">{{ tech.realName || tech.username }}</text>
							<text class="status" :class="getStatusClass(tech.status)">
								{{ getStatusText(tech.status) }}
							</text>
						</view>
					</view>
					<view class="tech-stats">
						<text class="orders">{{ tech.currentOrders || 0 }}个订单</text>
						<text class="rating">评分: {{ tech.rating || 5.0 }}</text>
					</view>
				</view>
				
				<view class="empty" v-if="techList.length === 0">
					<text>暂无技术员数据</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stats: {},
				pendingOrders: [],
				techList: [],
				loading: false
			}
		},
		onLoad() {
			this.checkPermission()
			this.loadDashboardData()
		},
		onShow() {
			this.loadDashboardData()
		},
		methods: {
			checkPermission() {
				if (!this.$store || !this.$store.getters.isDispatcher) {
					uni.showToast({
						title: '权限不足',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
					return false
				}
				return true
			},
			
			async loadDashboardData() {
				this.loading = true
				try {
					await Promise.all([
						this.loadStats(),
						this.loadPendingOrders(),
						this.loadTechList()
					])
				} catch (error) {
					console.error('加载数据失败:', error)
				} finally {
					this.loading = false
				}
			},
			
			async loadStats() {
				try {
					const res = await this.$api.getDispatcherStats()
					if (res.code === 200) {
						this.stats = res.data
					}
				} catch (error) {
					console.error('加载统计数据失败:', error)
				}
			},
			
			async loadPendingOrders() {
				try {
					const res = await this.$api.getOrderList({ status: 1, pageSize: 5 })
					if (res.code === 200) {
						this.pendingOrders = res.data || []
					}
				} catch (error) {
					console.error('加载待指派订单失败:', error)
				}
			},
			
			async loadTechList() {
				try {
					const res = await this.$api.getTechList()
					if (res.code === 200) {
						this.techList = (res.data || []).slice(0, 5) // 只显示前5个
					}
				} catch (error) {
					console.error('加载技术员列表失败:', error)
				}
			},
			
			goPendingOrders() {
				uni.switchTab({
					url: '/pages/order/list?status=1'
				})
			},
			
			goTechList() {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				})
			},
			
			goOrderList() {
				uni.switchTab({
					url: '/pages/order/list'
				})
			},
			
			goAssignHistory() {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				})
			},
			
			goOrderDetail(id) {
				uni.navigateTo({
					url: `/pages/order/detail?id=${id}`
				})
			},
			
			assignOrder(id) {
				uni.navigateTo({
					url: `/pages/dispatcher/assign?orderId=${id}`
				})
			},
			
			getStatusClass(status) {
				// 这里的status可能是技术员的工作状态
				return status === 'available' ? 'status-available' : 'status-busy'
			},
			
			getStatusText(status) {
				return status === 'available' ? '空闲' : '忙碌'
			},
			
			formatTime(time) {
				if (!time) return ''
				const date = new Date(time)
				const now = new Date()
				const diff = now - date
				
				if (diff < 60000) return '刚刚'
				if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前'
				if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前'
				return Math.floor(diff / 86400000) + '天前'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dispatcher-dashboard {
		background: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx;
	}
	
	.stats-section {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-bottom: 40rpx;
		
		.stat-card {
			flex: 1;
			min-width: 300rpx;
			background: #fff;
			border-radius: 15rpx;
			padding: 30rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
			
			.stat-icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 30rpx;
				font-size: 36rpx;
				
				&.pending {
					background: linear-gradient(45deg, #ff9500, #ff5722);
				}
				
				&.processing {
					background: linear-gradient(45deg, #007AFF, #0056CC);
				}
				
				&.techs {
					background: linear-gradient(45deg, #34c759, #28a745);
				}
				
				&.assigned {
					background: linear-gradient(45deg, #5856d6, #4a4a8a);
				}
			}
			
			.stat-info {
				flex: 1;
				
				.stat-number {
					display: block;
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
				}
				
				.stat-label {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.more {
			font-size: 24rpx;
			color: #007AFF;
			font-weight: normal;
		}
	}
	
	.quick-actions {
		margin-bottom: 40rpx;
		
		.action-grid {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			
			.action-item {
				flex: 1;
				min-width: 160rpx;
				background: #fff;
				border-radius: 15rpx;
				padding: 40rpx 20rpx;
				text-align: center;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
				
				.action-icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto 20rpx;
					font-size: 36rpx;
					
					&.pending-icon {
						background: linear-gradient(45deg, #ff9500, #ff5722);
					}
					
					&.tech-icon {
						background: linear-gradient(45deg, #34c759, #28a745);
					}
					
					&.order-icon {
						background: linear-gradient(45deg, #007AFF, #0056CC);
					}
					
					&.history-icon {
						background: linear-gradient(45deg, #5856d6, #4a4a8a);
					}
				}
				
				.action-text {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
	
	.pending-orders {
		margin-bottom: 40rpx;
		
		.order-list {
			.order-item {
				background: #fff;
				border-radius: 15rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
				
				.order-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					
					.order-title {
						flex: 1;
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-right: 20rpx;
					}
					
					.order-budget {
						font-size: 32rpx;
						font-weight: bold;
						color: #FF6B6B;
					}
				}
				
				.order-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					
					.category {
						font-size: 24rpx;
						color: #666;
						background: #f0f0f0;
						padding: 4rpx 12rpx;
						border-radius: 12rpx;
					}
					
					.user {
						font-size: 24rpx;
						color: #666;
					}
					
					.time {
						font-size: 24rpx;
						color: #999;
					}
				}
				
				.order-actions {
					.assign-btn {
						width: 100%;
						height: 60rpx;
						background: linear-gradient(45deg, #007AFF, #0056CC);
						color: #fff;
						border: none;
						border-radius: 30rpx;
						font-size: 24rpx;
					}
				}
			}
			
			.empty {
				text-align: center;
				padding: 80rpx 0;
				color: #999;
				font-size: 28rpx;
			}
		}
	}
	
	.tech-status {
		.tech-list {
			.tech-item {
				background: #fff;
				border-radius: 15rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
				
				.tech-info {
					display: flex;
					align-items: center;
					
					.avatar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 30rpx;
						background: linear-gradient(45deg, #667eea, #764ba2);
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;
						
						.avatar-text {
							font-size: 24rpx;
							font-weight: bold;
							color: #fff;
						}
					}
					
					.info {
						.name {
							display: block;
							font-size: 28rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 8rpx;
						}
						
						.status {
							font-size: 24rpx;
							padding: 4rpx 12rpx;
							border-radius: 12rpx;
							
							&.status-available {
								color: #34c759;
								background: rgba(52, 199, 89, 0.1);
							}
							
							&.status-busy {
								color: #ff9500;
								background: rgba(255, 149, 0, 0.1);
							}
						}
					}
				}
				
				.tech-stats {
					text-align: right;
					
					.orders {
						display: block;
						font-size: 24rpx;
						color: #666;
						margin-bottom: 8rpx;
					}
					
					.rating {
						font-size: 24rpx;
						color: #ff9500;
					}
				}
			}
			
			.empty {
				text-align: center;
				padding: 80rpx 0;
				color: #999;
				font-size: 28rpx;
			}
		}
	}
</style>